<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="styleFactures.css" />
</head>
<body>
	<div id="tout">


		<div id="header">
			<label style="font-size: 50px" id="espFamille">Espace famille</label>
			<div id="headerDroite">
				<h:form>
					<h:panelGrid columns="2">
						<h:outputText style="center:left" value="#{mbConnexion.leLogin}" />
						<h:commandButton value="Déconnexion"
							action="#{mbConnexion.deconnexion}" />
						<h:outputText style="center:left" />
						<h:outputText style="center:left" />
					</h:panelGrid>
				</h:form>
			</div>



		</div>
		<div style="clear: both;"></div>
		<div id="photo">
			<img src="autreImages/classess.jpg" alt="photo" /> <img
				src="autreImages/vignette_passeport.jpg" alt="photo" /> <img
				src="autreImages/vignette_rencontre_jeunesse.jpg" alt="photo" />
			<div id="dernierePhoto">
				<img src="autreImages/vignette_vivre.jpg" alt="photo" />
			</div>
		</div>
		<div id="content">
			<ul id="menu">

				<li><a href="accueil.xhtml">Accueil</a></li>
				<li><a href="ficheEnfant.xhtml">Ma Fiche Enfant</a></li>
				<li><a href="Consulterinscriptions.xhtml">Mes Inscriptions</a>
					<ul>
						<li><a href="inscriptions.xhtml">Inscrire/Modifier</a></li>
						<li><a href="Consulterinscriptions.xhtml">Consulter
								activités</a></li>
					</ul></li>
				<li><a href="factures.xhtml">Mes Factures</a></li>
				<li><a href="contact.xhtml">Contact</a></li>
			</ul>
			<div id="milieux">
				<div id="centre">
					<h4 id="titreDetail">
						<h:outputText value="Facture du  " />
						<h:outputText value="#{beanFacFam.dateFacture}" />
						<h:outputText value=" pour la période du  " />
						<h:outputText value="#{beanFacFam.perInsc.dateDebutInscription}">
							<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
						</h:outputText>
						<h:outputText value=" au " />
						<h:outputText value="#{beanFacFam.perInsc.dateFinInscription}">
							<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
						</h:outputText>
					</h4>
					<div id="deuxColonnes">
						<div id="colonneGauche">
							<fieldset id="presencesFacturees">
								<legend>
									<b>Présences facturées </b>
								</legend>
								<table>
									<tr>
										<td><label id="activite" style="font-size: 18px">Accueil
												matin</label></td>

									</tr>
									<tr>
										<td><label id="nbJfactureMat">nombre d'accueils
												facturés : </label></td>
										<td><h:outputText id="nbMat"
												value="#{beanFacFam.nbMatin}" /></td>
									</tr>
									<tr>
										<td><label id="tarif1">tarifs horaire : </label></td>
										<td><h:outputText id="TarifMat"
												value="#{beanFacFam.tarifmatin}" /> €</td>
									</tr>
									<tr>
									</tr>
									<tr>
										<td><label id="activite" style="font-size: 18px">Accueil
												cantine</label></td>
									</tr>
									<tr>
										<td><label id="nbJfactureCan">nombre d'accueils
												facturés : </label></td>
										<td><h:outputText id="nbMid" value="#{beanFacFam.nbMidi}" /></td>
									</tr>
									<tr>
										<td><label id="tarif2">tarifs horaire : </label></td>
										<td><h:outputText id="TarifMid"
												value="#{beanFacFam.tarifmidi}" /> €</td>
									</tr>
									<tr>
									</tr>
									<tr>
										<td><label id="activite" style="font-size: 18px">Accueil
												Soir</label></td>
									</tr>
									<tr>
										<td><label id="nbJfactureCan">nombre d'accueils
												facturés : </label></td>
										<td><h:outputText id="nbSoir"
												value="#{beanFacFam.nbSoir}" /></td>
									</tr>
									<tr>
										<td><label id="tarif3">tarifs horaire : </label></td>
										<td><h:outputText id="TarifSoir"
												value="#{beanFacFam.tarifsoir}" /> €</td>
									</tr>
									<tr>
									</tr>


								</table>
							</fieldset>
						</div>
						<div id="colonneDroite">
							<fieldset id="presencesFacturees">
								<table>
									<tr />
									<tr>
										<td style="font-size: 18px">Montant :</td>
										<td><h:outputText style="font-size: 16px" id="montant"
												value="#{beanFacFam.montant}" /> €</td>
									</tr>
									<tr>
										<td style="font-size: 18px">Payable jusqu'au :</td>
										<td><h:outputText style="font-size: 16px"
												id="dateLimitePaiement" value="#{beanFacFam.dateLimite}" /></td>
									</tr>
								</table>
							</fieldset>
						</div>
					</div>
					<div style="clear: both;"></div>
					<div id="bas">
						<a href="#">Editer la facture </a> <a href="factures.xhtml">Retour
							à ma liste de factures </a>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div id="footer">
			<img src="images/afcepfMinus.png"></img> Gepeto <img
				src="images/malakoffMinus.png" />
		</div>
	</div>
</body>
</html>
